<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>对账</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css"/>
    <style>

        .box{
            width:1180px;
            margin:35px auto 0;
        }
        .hidden {
            display: none !important;
        }

        .card{
            width:1180px;
            overflow-x: auto;
            overflow-y: hidden;
        }
        .one{
            width:1400px;
            height:54px;
            align-items: center;
            background:rgba(250,250,250,1);
            font-size:16px;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .tit1{
            width:104px;
            padding-left:48px;
        }
        .tit2{
            width:141px;
            padding-right:32px;
        }
        .tit3{
            width:84px;
            padding-right:32px;
        }
        .tit4{
            width:117px;
            padding-right:32px;
        }
        .tit5,.tit6,.tit9,.tit10{
            width:70px;
            padding-right:32px;
        }
        .tit7{
            width:112px;
            padding-right:32px;
        }
        .tit8{
            width:70px;
            padding-right:32px;
        }
        .tit11{
            width:112px;
            padding-right:32px;
        }

        .one1{
            width:1400px;
            height:54px;
            align-items: center;
            background:#fff;
            font-size:14px;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .blue{
            color:rgba(22,119,255,1);
        }
        .blue1{
            padding-right:24px;
        }
        .one2{
            width:1368px;
            height:54px;
            align-items: center;
            background:#FAFAFA;
            font-size:14px;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .bottom{
            padding:56px 0 56px 100px;
        }

        .pageee{
            width:32px;
            height:32px;
            margin-right:8px;
        }
        .page{
            width:32px;
            height:32px;
            line-height:32px;
            text-align: center;
            background:rgba(255,255,255,1);
            border-radius:6px;
            border:1px solid rgba(221,221,221,1);
            margin-right:8px;
            font-size:14px;
            color:rgba(102,102,102,1);
        }
        .page_active{
            background:rgba(252,43,64,1);
            border-radius:6px;
            border:none;
            color:rgba(255,255,255,1);
        }
        .select_box{
            border-radius:4px;
            border:1px solid rgba(204,204,204,1);
            font-size:14px;
            font-weight:400;
            color:rgba(102,102,102,1);
            margin-left:406px;
            height:30px;
        }
        .select{
            width:74px;
            height:30px;
            line-height:30px;
            text-align: center;
            border-radius:4px;
            cursor: pointer;
        }
        .select_active{
            color:rgba(243,243,245,1);
            background:rgba(252,43,64,1);
        }
        .titleee{
            padding-bottom:35px;
        }
        .moneyAll{
            font-size:14px;
            font-weight:400;
            color:rgba(51,51,51,1);
            padding-left:200px;
        }
        .money{
            font-weight:600;
        }
        .price{
            font-weight:600;
            font-size:22px;
        }
        .btn1{
            width:92px;
            height:32px;
            background:rgba(250,250,250,1);
            border-radius:4px;
            border:1px solid rgba(221,221,221,1);
            font-size:14px;
            font-weight:400;
            color:rgba(102,102,102,1);
            line-height:32px;
            text-align: center;
            cursor: pointer;
        }
        .btn2{
            margin-left: 16px;
            margin-right:308px;
        }
        #order,
        #about,
        #user {
            display: none;
        }
        .nooo{
            height:54px;
            background:rgba(255,255,255,1);
            text-align:center;
            line-height: 54px;
        }
        .tit12{
            width:30px;
            padding-left: 20px;
        }

        .geng_tou {
            font-size: 14px;
            font-weight: 600;
            color: rgba(111, 111, 111, 1);
            line-height: 30px;
            text-align: center;
            margin-top: 10px;
            border: 1px solid #ccc;
            width:120px;
            cursor: pointer;
        }
    </style>
</head>
<body>
{include file="public/header"}

<div class="box">
    <div class="titleee flex-wrap">
        <div class="select_box flex-wrap">
            <div class="select {if $type == 1}select_active{/if}" onclick="location.href = '/shop/duizhang/index?type=1';">全部</div>
            <div class="select {if $type == 2}select_active{/if}" onclick="location.href = '/shop/duizhang/index?type=2';">已结算</div>
            <div class="select {if $type == 3}select_active{/if}" onclick="location.href = '/shop/duizhang/index?type=3';">待结算</div>
            <div class="select {if $type == 4}select_active{/if}" onclick="location.href = '/shop/duizhang/index?type=4';">已逾期</div>
        </div>
        <div class="moneyAll">
            总计逾期金额：<span class="money">¥</span><span class="price">{$order_freight}</span>
        </div>
    </div>
    <div class="card">
        <div class="one flex-wrap">
            <div class="tit12">
                <input type="checkbox" class="all_check">
            </div>
            <div class="tit1">序号</div>
            <div class="tit2">订单编号</div>
            <div class="tit3">出发地</div>
            <div class="tit4">目的地</div>
            <!--<div class="tit5">运单状态</div>-->
            <div class="tit6">发布日期</div>
            <div class="tit7">货物名称</div>
            <div class="tit8">货物单位</div>
            <div class="tit9">结算方式</div>
            <div class="tit10">运费价格</div>
            <div class="tit11">备注</div>
        </div>
        {if count($data)>0}
        {foreach name="data" item="vo"}
            <div class="one1 flex-wrap">
                <div class="tit12 aui-ellipsis-1">
                    <input type="checkbox" class="one_check" data-id="{$vo.order_id}">
                </div>
                <div class="tit1 aui-ellipsis-1">{:xuHao($key,$pages)}</div>
                <div class="tit2 aui-ellipsis-3">{$vo['order_num']}</div>
                <div class="tit3 aui-ellipsis-2">{$vo['go_sheng']}{$vo.go_shi}</div>
                <div class="tit4 aui-ellipsis-2">{$vo['to_sheng']}{$vo['to_shi']}</div>
                <!--<div class="tit5 aui-ellipsis-2">待发布</div>-->
                <div class="tit6 aui-ellipsis-2">{$vo['order_fb_time']}</div>
                <div class="tit7 aui-ellipsis-2">{$vo.order_goods_name}</div>
                <div class="tit8 aui-ellipsis-2">{$vo['order_goods_ton']}(吨)</div>
                <div class="tit9 aui-ellipsis-2">
                    {if $vo['con_type']==1}账期{/if}
                    {if $vo['con_type']==2}现结{/if}
                    {if $vo['con_type']==3}到付{/if}
                </div>
                <div class="tit10 aui-ellipsis-2">¥{$vo['order_freight']}</div>
                <div class="tit11 aui-ellipsis-2">{$vo['order_intro']}</div>
            </div>
        {/foreach}

        {else /}
          <div class="nooo">暂无数据</div>
        {/if}
    </div>
    {if $type==2}
    <div>
        <form id="formImg">
        <input type="file" accept="image/*" id="fileimg" onChange="previewimg(this)" style="display:none;" name ="input_image" >
        <input type="hidden" name="order_scpz_img" id="order_scpz_img" value="" />
        <div class="geng_tou">点击上传凭证</div>
            <img src="" alt="" class="order_scpz_img hidden" style="height: 150px;display: block">
        </form>
    </div>
    {/if}
    <div class="bottom flex-wrap">
        {if $type==3||$type==4}
        <div class="btn1 order_sure">确认账单</div>
        {/if}
        {if $type==2}
        <div class="btn1 btn2 order_pic">上传凭证</div>
        {/if}
        {$data->render()}
    </div>
<input type="hidden" name="ids" id="ids" value="" />
</div>
</body>
<script type="text/javascript" src="__SCRIPT__/xydd.js"></script>
<script src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript">
    /**
     * 点击全选
     */
    $('.all_check').click(function () {
        if($(this).prop('checked')){
            $('input:checkbox').prop('checked',true);
        }else{
            $('input:checkbox').prop('checked',false);
        }
        getOrderIds();
    });
    /**
     * 点击单个
     */
    $('.one_check').click(function () {
        var all_length = $('.one_check').length;
        var check_length = $('.one_check:checked').length;
        if($(this).prop('checked')){
            if(check_length >= all_length){
                $('.all_check').prop('checked',true);
            }
        }else{
            if(check_length < all_length){
                $('.all_check').prop('checked',false);
            }
        }
        getOrderIds();
    });
    /**
     * 获取选中的order_id
     */
    function getOrderIds() {
        var oids = '';
        $('.one_check:checked').each(function (i,d) {
            oids += $(d).attr('data-id')+',';
        });
        $('#ids').val(oids);
    }
    //------------图片上传-------------
    $('.geng_tou').click(function () {
        $('#fileimg').click();
    });
    function previewimg(obj){
        var src = window.URL.createObjectURL(obj.files[0]);
        $('.order_scpz_img').attr('src',src);
        $('.order_scpz_img').removeClass('hidden');
        //此方法已封装在xydd.js里
        uploadImageCommon('formImg','order_scpz_img');
    }
</script>
<script>
    $('.order_sure').click(function () {
        var oids = $('#ids').val();
        if(oids == ''){
            alert('请选择订单！');
            return false;
        }else{
            if(confirm('确定吗？')){
                if(confirm('确定吗？')){
                    var url = "{:url('shop/duizhang/bill')}";
                    ajaxForOrder(url,oids,'');
                }
            }
        }
    });
    $('.order_pic').click(function () {
        var oids = $('#ids').val();
        var img = $('#order_scpz_img').val();
        if(oids == ''){
            alert('请选择订单！');
            return false;
        }else{
            if(img == ''){
                alert('请上传凭证！');
                return false;
            }else{
                var url = "{:url('shop/duizhang/bill1')}";
                ajaxForOrder(url,oids,img);
            }
        }
    });
    function ajaxForOrder(url,ids,img) {
        $.ajax({
            url:url,
            type:'post',
            data:'ids='+ids+'&image='+img,
            dataType:'json',
            success:function(res){
                alert(res.msg);
                if(res.code == 200){
                    location.reload() ;
                }
            }
        })
    }
</script>
</html>
